<template>
  <div
    class="form-section"
    v-if="formData.config.has_modal || formData.config.customize.has_modal"
  >
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.height', '高度')"
          :tooltipContent="
            $t('menu.dev.action.tip.height', '弹窗高度可以是数字也可以是字符串')
          "
          prop="config.modal.height"
        >
          <el-input v-model="formData.config.modal.height" />
        </el-form-item-plus>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.width', '宽度')"
          :tooltipContent="
            $t('menu.dev.action.tip.width', '弹窗宽度可以是数字也可以是字符串')
          "
          prop="config.modal.width"
        >
          <el-input v-model="formData.config.modal.width" />
        </el-form-item-plus>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { smartTranslate as $t, transPlaceholder as $p } from '@/lang';

defineProps({
  formData: {
    type: Object,
    required: true,
  },
});
</script>

<style lang="scss" scoped></style>
